import React, { useEffect, useState } from 'react'
import { Input, Form, Button, Modal, List, Toast, Dialog, Checkbox } from 'antd-mobile'
import request from '../../api/request'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './index.module.css'
import { useSelector, useDispatch } from 'react-redux'
import { addpope, deitpope, delpope } from '../../store/user'
import { FileOutline, DeleteOutline } from 'antd-mobile-icons'
function Pope() {
    const { userpope } = useSelector(state => state.user)
    const dispatch = useDispatch()
    const [visible, setVisible] = useState(false)
    const [disvisible, setDisvisible] = useState(false)
    const [form] = Form.useForm()

    // 删除
    const detlist = async (item) => {
        const res = await Dialog.confirm({
            content: '您确定要删除吗',
        })
        if (res) {
            dispatch(delpope(item))
        }
        else {
            console.log('确定删除');

        }

    }
    // 编辑
    const editdll = (item) => {
        setVisible(true)
        form.setFieldsValue(item)
        setDisvisible(false)
    }
    // 新增
    const addlist = () => {
        setVisible(true)
        setDisvisible(true)
        form.resetFields('')
    }


    const onFinish = () => {
        if (!disvisible == '') {
            const addobj = form.getFieldsValue(false)
            dispatch(addpope(addobj))

        }
        else {
            const editobj = form.getFieldsValue(true)
            dispatch(deitpope(editobj))
        }
        setVisible(false)
        form.resetFields('')
    }

    const sfz = () => {
        const inputEl = document.createElement('input')
        inputEl.type = 'file'
        inputEl.click()
       inputEl. onchange = async () => {
            const file = inputEl.files[0]
            const newFile = new FormData()
            newFile.append('file', file)
            const res = await request.post('/api/orc/upload/image', newFile)
            console.log(res);
            let { code, data } = res.data
            if (code == 200) {
                   Toast.show({
                    icon:'success',
                    content:'识别成功'

                })
                form.setFieldsValue(data)
            }
            else{
                   Toast.show({
                    icon:'success',
                    content:'识别失败'

                })
            }





        }
    }
    return (
        <div>
            <Button color='primary' fill='outline' onClick={() => addlist()}>
                新增
            </Button>
            <div>
                <div>
                    <List header='基础用法'>
                        {
                            userpope.map((item, index) => {
                                return <div key={index} >

                                    <List.Item prefix={<FileOutline onClick={() => editdll(item)} />}
                                        extra={
                                            <div>
                                                <DeleteOutline onClick={() => detlist(item)} />
                                                <div
                                                    onClick={() => {
                                                        console.log('点击了')
                                                    }}
                                                >
                                                    <Checkbox />
                                                </div>
                                            </div>
                                        } description={item.code}>{item.name}</List.Item>



                                </div>


                            })
                        }
                    </List>
                </div>

            </div>
            <div> <Modal
                visible={visible}
                content={
                    <Form
                        layout='horizontal'
                        onFinish={onFinish}
                        form={form}
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                提交
                            </Button>
                        }
                    >
                        <Form.Header>{!disvisible ? '编辑' : '新增'}</Form.Header>
                        <Button color='primary' fill='outline' onClick={() => sfz()}>
                            识别身份证
                        </Button>
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入姓名' />
                        </Form.Item>
                        <Form.Item
                            name='code'
                            label='身份证'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input onChange={console.log} placeholder='请输入姓名' />
                        </Form.Item>
                    </Form>
                }

                closeOnAction
                onClose={() => {
                    setVisible(false)
                }}

            />

            </div>

        </div>
    )
}

export default Pope
